import styles from './Register.module.scss';
import { Space, Typography, Form, Input, Button } from 'antd';
import { UserAddOutlined } from '@ant-design/icons';
import { Link } from 'react-router-dom';
import { LOGIN } from '../router';
const Register = () => {
	const { Title } = Typography;
	const onFinish = values => {
		console.log(values);
	};
	return (
		<div className={styles.container}>
			<div>
				<Space>
					<Title level={3}>
						<UserAddOutlined />
					</Title>
					<Title level={3}>注册成为新用户</Title>
				</Space>
				<div>
					<Form
						labelCol={{ span: 8 }}
						wrapperCol={{ span: 16 }}
						style={{ maxWidth: 600 }}
						onFinish={onFinish}
					>
						<Form.Item
							label="用户名"
							name="username"
							rules={[
								{ required: true, message: 'Please input your username!' },
								{
									type: 'string',
									min: 5,
									max: 20,
									message: '请注意长度',
								},
							]}
						>
							<Input />
						</Form.Item>
						<Form.Item
							label="密码"
							name="password"
							rules={[
								{ required: true, message: 'Please input your password!' },
								{
									type: 'string',
									min: 5,
									max: 20,
									message: '请注意长度',
								},
							]}
						>
							<Input.Password />
						</Form.Item>
						<Form.Item
							label="确认密码"
							name="confirm"
							rules={[
								{ required: true, message: 'Please input your password!' },
								{
									type: 'string',
									min: 5,
									max: 20,
									message: '请注意长度',
								},
								({ getFieldValue }) => ({
									validator(_, value) {
										if (!value || getFieldValue('password') === value) {
											return Promise.resolve();
										} else {
											return Promise.reject(new Error('两次密码不一致'));
										}
									},
								}),
							]}
						>
							<Input.Password />
						</Form.Item>
						<Form.Item
							label="用户名"
							name="nickName"
							rules={[{ required: true, message: '请输入用户名' }]}
						>
							<Input />
						</Form.Item>
						<Form.Item label={null}>
							<Space>
								<Button type="primary" htmlType="submit">
									提交
								</Button>
								<Link to={LOGIN}>已有账号,去登录</Link>
							</Space>
						</Form.Item>
					</Form>
				</div>
			</div>
		</div>
	);
};

export default Register;
